<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .sort-container {
            display: flex;
        }

        .sort-button {
            background-color: #f1f1f1;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            position: relative;
        }

        .sort-button::after {
            content: "";
            display: inline-block;
            margin-left: 5px;
        }

        .sort-button.asc::after {
            content: "▲";
        }

        .sort-button.desc::after {
            content: "▼";
        }
    </style>
</head>
<body>

<div class="sort-container">
    <button id="synthesisButton" class="sort-button" onclick="sort('synthesis')">总和排序</button>
    <button id="hotScoreButton" class="sort-button" onclick="sort('hotScore')">热度排序</button>
    <button id="scoreButton" class="sort-button" onclick="sort('score')">评分排序</button>
</div>

<script>
    // Check URL on page load to set initial state
    document.addEventListener('DOMContentLoaded', function () {
        const currentSort = getParameterByName('sort');
        updateSortButtonState(currentSort);
    });

    function sort(sortType) {
        const currentSort = getParameterByName('sort');
        let newSort;

        if (currentSort && currentSort.startsWith(sortType)) {
            // If the current sort is for the same type, toggle direction
            newSort = currentSort.endsWith('_asc') ? `${sortType}_desc` : `${sortType}_asc`;
        } else {
            // If the current sort is for a different type or not present, set as asc
            newSort = `${sortType}_asc`;
        }

        // Update URL and navigate to the new page
        updateUrlParam('sort', newSort);
        window.location.href = buildNewUrl();
    }

    function getParameterByName(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    function updateUrlParam(key, value) {
        const url = new URL(window.location);
        url.searchParams.set(key, value);
        window.history.replaceState({}, '', url);
    }

    function buildNewUrl() {
        const url = new URL(window.location);
        const sortParam = getParameterByName('sort');
        if (sortParam) {
            url.searchParams.set('sort', sortParam);
        } else {
            url.searchParams.delete('sort');
        }
        return url.href;
    }

    function updateSortButtonState(sortParam) {
        const buttons = document.querySelectorAll('.sort-button');
        buttons.forEach(button => {
            button.classList.remove('asc', 'desc');
            const buttonId = button.id.replace('Button', '');
            if (sortParam && sortParam.startsWith(buttonId)) {
                if (sortParam.endsWith('_asc')) {
                    button.classList.add('asc');
                } else {
                    button.classList.add('desc');
                }
            }
        });
    }


</script>

</body>
</html>
